import React, { Component } from "react";
import { Carousel, WingBlank, Grid } from "antd-mobile";
import "./recommend.css";
import xianshi from "../../../api/index/indexXianshi";
import shouji from "../../../api/index/indexShouji";
import bijiben from "../../../api/index/indexBijiben";
import pad from "../../../api/index/indexPad";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

//最大的组件
class Recommend extends Component {
  constructor(props) {
    super(props);
    this.state = {
      endtime: "",
      xianshi: []
    };
  }
  componentDidMount() {}

  componentWillMount() {
    var todayYear = new Date().getFullYear();
    var todayMonth = new Date().getMonth() + 1;
    var todayDay = new Date().getDate() + 1;
    var endtime = todayYear + "-" + todayMonth + "-" + todayDay;
    this.state.endtime = endtime;
  }
  timeEnd() {
    var todayYear = new Date().getFullYear();
    var todayMonth = new Date().getMonth() + 1;
    var todayDay = new Date().getDate() + 1;
    var endtime = todayYear + "-" + todayMonth + "-" + todayDay;
    this.state.endtime = endtime;
  }
  render() {
    return (
      <div id="banner">
        <Banner />
        <Toutiao />
        <Xianshi
          endTime={this.state.endtime}
          timeEnd={this.timeEnd.bind(this)}
        />
        <Cuxiao />
        <MobileList />
        <ComputedList />
        <PadList />
      </div>
    );
  }
}

//轮播图
class Banner extends Component {
  state = {
    data: [
      "yStgIblTekkz4haIKma2",
      "VCogRVWYmu4EinnHSdI4",
      "jQ5f22zonmUvlhccuW2U",
      "H6G77acb1j7bdnERrBum",
      "8RgLEEhHHPVO8spI6usz",
      "ztTmqukFiR8BtqSCy3jJ",
      "Fenjdh737MA1dgaALyVn",
      "JeeRxhMQfukuGQPHI5B5"
    ],
    imgHeight: 176
  };
  render() {
    return (
      <Carousel
        autoplay={true}
        infinite={true}
        slideWidth="350px"
        cellSpacing={15}
      >
        {this.state.data.map(val => (
          <a
            key={val}
            style={{
              display: "inline-block",
              width: "100%",
              height: this.state.imgHeight
            }}
          >
            <img
              className="bannerimg"
              src={`https://res.vmallres.com/pimages//sale/2019-03/${val}.jpg`}
              alt=""
              style={{ width: "100%", verticalAlign: "top" }}
              onLoad={() => {
                // fire window resize event to change height
                window.dispatchEvent(new Event("resize"));
                this.setState({ imgHeight: "auto" });
              }}
            />
          </a>
        ))}
      </Carousel>
    );
  }
}

//头条
class Toutiao extends Component {
  render() {
    return (
      <div className="toutiao">
        <div className="title">
          <img src="https://res.vmallres.com/nwap/20190228/images/echannelWap/logo/logo_wapHeadNews.png" />
        </div>

        <div className="more">更多</div>

        <div className="content">
          <Carousel
            className="my-carousel"
            vertical
            dots={false}
            dragging={false}
            swiping={false}
            autoplay
            infinite={true}
            speed={1000}
            autoplayInterval={1000}
            resetAutoplay={false}
          >
            {[
              "新品来了！华为畅享新品正式发布！",
              "慎点！EMUI9.1可能会让你兴奋得睡不着",
              "最全！一张图读懂HUAWEI P30系列",
              "华为​P30全球新品发布会最全合集！",
              "新品来了！华为畅享新品正式发布！",
              "华为P30系列新品上市"
            ].map(type => (
              <div className="v-item" key={type}>
                {type}
              </div>
            ))}
          </Carousel>
        </div>
      </div>
    );
  }
}

//限时购
class Xianshi extends Component {
  constructor(props) {
    super(props);
    this.state = {
      day: 0,
      hour: 0,
      minute: 0,
      second: 0,
      xianshiList: []
    };
  }
  componentDidMount() {
    if (this.props.endTime) {
      let endTime = this.props.endTime.replace(/-/g, "/");
      this.countFun(endTime);
    }
    xianshi.then(res => {
      this.setState({
        xianshiList: res.data.data
      });
    });
  }
  //组件卸载取消倒计时
  componentWillUnmount() {
    clearInterval(this.timer);
  }
  //计算离第二天还有多长时间
  countFun = time => {
    let end_time = new Date(time).getTime(),
      sys_second = end_time - new Date().getTime();
    this.timer = setInterval(() => {
      //防止倒计时出现负数
      if (sys_second > 1000) {
        sys_second -= 1000;
        let day = Math.floor(sys_second / 1000 / 3600 / 24);
        let hour = Math.floor((sys_second / 1000 / 3600) % 24);
        let minute = Math.floor((sys_second / 1000 / 60) % 60);
        let second = Math.floor((sys_second / 1000) % 60);
        this.setState({
          day: day,
          hour: hour < 10 ? "0" + hour : hour,
          minute: minute < 10 ? "0" + minute : minute,
          second: second < 10 ? "0" + second : second
        });
      } else {
        clearInterval(this.timer);
        //倒计时结束时触发父组件的方法
        this.props.timeEnd();
      }
    }, 1000);
  };
  render() {
    let arr = this.state.xianshiList;
    let data = arr.map(item => {
      return {
        imgUrl: `${item.imgUrl[0]}`,
        pname: `${item.smallpname}`,
        pid: `${item.pid}`
      };
    });
    return (
      <div id="Xianshi">
        <div className="time">
          <span className="time_a">限时购</span>
          <img
            src="https://res.vmallres.com/nwap/20190228/images/echannelWap/icon/seckill_title.png"
            alt=""
          />
          <span className="time_b">
            {this.state.hour}:{this.state.minute}:{this.state.second}
          </span>
          <span className="time_c">后结束</span>
        </div>
        {/* 限时购商品 */}
        <Grid
          data={data}
          isCarousel
          carouselMaxRow={1}
          square={false}
          hasLine={false}
          renderItem={dataItem => (
            <div>
              <Link
                to={{
                  pathname: `/detail`,
                  state: { id: dataItem.pid }
                }}
              >
                <img
                  src={dataItem.imgUrl}
                  style={{ width: "65px", height: "65px" }}
                />
              </Link>
              <div
                style={{ color: "#888", fontSize: "12px", marginTop: "12px" }}
              >
                <Link to={{ pathname: `/detail`, state: { id: dataItem.pid } }}>
                  <span>{dataItem.pname}</span>
                </Link>
              </div>
            </div>
          )}
        />
      </div>
    );
  }
}

//促销
class Cuxiao extends Component {
  render() {
    return (
      <div className="cuxiao">
        <div className="cuxiaobox">
          <img src="https://res.vmallres.com/pimages//sale/2019-03/RzDBRR3AW4qNqAsM0uZT.jpg" />
        </div>
        <div className="cuxiaobox">
          <img src="https://res.vmallres.com/pimages//sale/2019-03/AI73TR53SfkJZgcAnv37.jpg" />
        </div>
        <div className="cuxiaobox">
          <img src="https://res.vmallres.com/pimages//sale/2019-03/PAR6VtBC6Alafuikec2t.jpg" />
        </div>
        <div className="cuxiaobox">
          <img src="https://res.vmallres.com/pimages//sale/2019-02/ISZvXRn7zkgCDXgJvKih.jpg" />
        </div>
        <div className="cuxiaobox">
          <img src="https://res.vmallres.com/pimages//sale/2019-03/DG6QNfNgQZ2MOcj9G1ny.jpg" />
        </div>
        <div className="cuxiaobox">
          <img src="https://res.vmallres.com/pimages//sale/2019-02/a6vzFsJYGKvZqUw0kBWb.jpg" />
        </div>
      </div>
    );
  }
}

//手机列表
class MobileList extends Component {
  constructor() {
    super();
    this.state = {
      shouji: []
    };
  }
  componentDidMount() {
    shouji.then(res => {
      this.setState({
        shouji: res.data.data
      });
    });
  }
  render() {
    let shouji = this.state.shouji;
    // console.log(shouji);
    return (
      <div>
        <h2 className="mobiletitle">手机</h2>
        <div className="listboos">
          {shouji.map(item => {
            return (
              <Link
                className="pList"
                key={item.pid}
                to={{ pathname: `/detail`, state: { id: item.pid } }}
              >
                <div className="pListImg">
                  <img src={item.imgUrl[0]} />
                  <p className="event">订金50抵100</p>
                </div>
                <p className="pname">{item.smallpname}</p>
                <p className="pprice">¥{item.pprice}</p>
              </Link>
            );
          })}
        </div>
      </div>
    );
  }
}

//笔记本列表
class ComputedList extends Component {
  constructor() {
    super();
    this.state = {
      bijiben: []
    };
  }
  componentDidMount() {
    bijiben.then(res => {
      this.setState({
        bijiben: res.data.data
      });
    });
  }
  render() {
    let bijiben = this.state.bijiben;
    return (
      <div>
        <h2 className="mobiletitle">笔记本</h2>
        <div className="listboos">
          {bijiben.map(item => {
            return (
              <Link
                className="pList"
                key={item.pid}
                to={{ pathname: `/detail`, state: { id: item.pid } }}
              >
                <div className="pListImg">
                  {/* <Link to={{ pathname: `/detail`, state: { id: item.pid } }}> */}
                  <img src={item.imgUrl[0]} />
                  {/* </Link> */}
                  <p className="event">订金50抵100</p>
                </div>
                {/* <Link to={{ pathname: `/detail`, state: { id: item.pid } }}> */}
                <p className="pname">{item.smallpname}</p>
                <p className="pprice">¥{item.pprice}</p>
                {/* </Link> */}
              </Link>
            );
          })}
        </div>
      </div>
    );
  }
}

//精品平板
class PadList extends Component {
  constructor() {
    super();
    this.state = {
      pad: []
    };
  }
  componentDidMount() {
    pad.then(res => {
      this.setState({
        pad: res.data.data
      });
    });
  }
  render() {
    let pad = this.state.pad;
    return (
      <div>
        <h2 className="mobiletitle">精品平板</h2>
        <div className="listboos">
          {pad.map(item => {
            return (
              <Link
                className="pList"
                key={item.pid}
                to={{ pathname: `/detail`, state: { id: item.pid } }}
              >
                <div className="pListImg">
                  {/* <Link to={{ pathname: `/detail`, state: { id: item.pid } }}> */}
                  <img src={item.imgUrl[0]} />
                  {/* </Link> */}
                  <p className="event">订金50抵100</p>
                </div>
                {/* <Link to={{ pathname: `/detail`, state: { id: item.pid } }}> */}
                <p className="pname">{item.smallpname}</p>
                <p className="pprice">¥{item.pprice}</p>
                {/* </Link> */}
              </Link>
            );
          })}
        </div>
      </div>
    );
  }
}

//暴露组件
export default Recommend;
